<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: qupen
  Date: 2016/9/18
  Time: 19:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="../../include/head.jsp">
    <jsp:param name="title" value="xinzengshijian"/>
</jsp:include>

<jsp:include page="../../include/tenant_header.jsp"/>

<jsp:include page="../../include/tenant_sidebar.jsp"/>

<div class="content-wrapper">
    <section class="content-header">
        <h4 class="page-title">新增事件</h4>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div class="box-body">
                <div class="form-horizontal">
                    <div class="sie-padding-top">
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name">事件名称:</label>

                            <div class="col-md-7">
                                <input id="name" class="form-control sie-input-border sie-input-uwh"
                                       style="width: 130px;height: 30px;"/>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name">事件类型:</label>

                            <div class="col-md-7">
                                <select id="type" class="form-control sie-input-border sie-input-uwh"
                                       style="padding: 2px 12px;width: 130px;height: 30px;">
                                    <option value="Error" style="line-height: 10px">Error</option>
                                    <option value="Warning">Warning</option>
                                    <option value="Action">Action</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name">事件描述:</label>

                            <div class="col-md-7">
                                <textarea id="description" class="form-control sie-input-border sie-input-uwh"
                                          style="width: 280px;height: 100px;"></textarea>
                            </div>
                        </div>
                        <div class="form-group form-group-change">
                            <label class="col-md-5 sie-left-name">事件触发:</label>

                            <div class="col-md-7">
                                <div class="data-row">
                                    <select class="form-control sie-input-border sie-input-uwh sie-select-change data-norm"
                                            style="margin-left: 100px;">
                                        <option>指标1</option>
                                        <option>指标2</option>
                                        <option>指标3</option>
                                        <option>指标4</option>
                                    </select><!--
                                 --><select class="form-control sie-input-border sie-input-uwh sie-select-change data-symbols"
                                            style="width: 60px;">
                                    <option> ></option>
                                    <option> >=</option>
                                    <option> =</option>
                                    <option> <=</option>
                                    <option> <</option>
                                </select><!--
                                --><input class="form-control sie-input-border sie-input-uwh sie-select-change data-value"
                                          style="padding: 2px 12px;"/><%--<!--
                                --><a class="hollow-button-purple" href="javascript:;"
                                      style="width: 60px;height:30px;line-height: 2.2">删除</a>--%>
                                </div>
                                <div>
                                    <a href="javascript:addRow();" class="dashes-button-lightBlue">
                                        <i class="fa fa-plus-circle" aria-hidden="true"
                                           style="color: #41aaaa;margin-left: 20px;margin-top: 6px;"></i>
                                        添加
                                    </a>

                                    <div style="margin-top: 130px;">
                                        <a id="create_button" class="solid-button-blue" href="javascript:;"
                                           style="margin-right: 30px;width: 100px;">保存</a>
                                        <a class="solid-button-orange" href="javascript:history.back(-1);"
                                           style="width: 100px;">取消</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<jsp:include page="../../include/foot.jsp"/>
<script>
    $(document).ready(function () {
        $("#create_button").click(function () {
            var data = JSON.stringify({
                name: $("#name").val(),
                type: $("#type").find("option:selected").text(),
                description: $("#description").val(),
                trigger:getTriggerConditionOfEvent()
            });
            $.ajax({
                type: "post",
                url: "/partner/{tenant}/api/v1/event/add".replace("{tenant}", getKeyByUrl()),
                data: data,
                contentType: "application/json;charset=utf-8",
                success: function () {
                    swal({
                        title: "<spring:message code="label.create.success"/>",
                        text: "",
                        type: "success",
                        showCancelButton: false,
                        showConfirmButton: true,
                        confirmButtonText: "确定",
                        animation: "slide-from-top"
                    }, function () {
                        window.location.replace("/partner/{tenant}/event/events#eventSub".replace("{tenant}", getKeyByUrl()));
                    });
                },
                error: function (e) {
                    console.log(e);
                    swal("Error!", "", "error");
                }
            })
        });

    });

    function addRow() {
        var $div = $("<div></div>").addClass("data-row").attr("style", "margin-top:20px;");
        $div.append(
                $("<select></select>").addClass("form-control sie-input-border sie-input-uwh sie-select-change data-operators").append(
                        $("<option></option>").text("AND")).append(
                        $("<option></option>").text("OR")).append(
                        $("<option></option>").text("NONE"))).append(
                $("<select></select>").addClass("form-control sie-input-border sie-input-uwh sie-select-change data-norm").append(
                        $("<option></option>").text("指标1")).append(
                        $("<option></option>").text("指标2")).append(
                        $("<option></option>").text("指标3")).append(
                        $("<option></option>").text("指标4"))).append(
                $("<select></select>").addClass("form-control sie-input-border sie-input-uwh sie-select-change data-symbols").attr("style", "width:60px").append(
                        $("<option></option>").text(">")).append(
                        $("<option></option>").text(">=")).append(
                        $("<option></option>").text("=")).append(
                        $("<option></option>").text("<=")).append(
                        $("<option></option>").text("<"))).append(
                $("<input/>").addClass("form-control sie-input-border sie-input-uwh sie-select-change data-value")).append(
                $("<a></a>").addClass("hollow-button-purple").attr("style", "width:60px;height:30px;line-height:2.2")
                        .attr("href", "javascript:;").attr("onclick", "deleteRow(this)").text("删除")
        );

        $(".dashes-button-lightBlue").before($div);
    }

    function deleteRow(_this) {
        $(_this).parent().remove()
    }

    function getTriggerConditionOfEvent(){
        var data=[];
        $.each($(".data-row"),function(index,_div){
            var o ={};
            if($(_div).find(".data-operators").find("option:selected").text()){
                o.operators=$(_div).find(".data-operators").find("option:selected").text();
            }else {
                o.operators="";
            }
            o.norm=$(_div).find(".data-norm").find("option:selected").text();
            o.symbol=$(_div).find(".data-symbols").find("option:selected").text();
            o.value=$(_div).find(".data-value").val();
           data.push(o);
        });
        return data;
    }
</script>
